import {designPage, reactive} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {Button, Segment, SegmentGroup} from "../../../../packages";
import {DemoLine} from "../../Demo/DemoLine";

export const demo1 = designPage(() => {

  const state = reactive({
    val: 'normal'
  });

  return () => (
    <DemoRow title="基本用法">
      <SegmentGroup v-model={state.val}>
        <Segment label="Mini" val="mini"/>
        <Segment label="Small" val="small"/>
        <Segment label="Normal" val="normal"/>
        <Segment label="Large" val="large"/>
      </SegmentGroup>
    </DemoRow>
  );
});


export const demoSizes = designPage(() => {

  const state = reactive({
    val: 'normal'
  });

  return () => (
    <DemoRow title="大小尺寸">
      <DemoLine>
        <SegmentGroup v-model={state.val} size="large">
          <Segment label="Mini" val="mini"/>
          <Segment label="Small" val="small"/>
          <Segment label="Normal" val="normal"/>
          <Segment label="Large" val="large"/>
        </SegmentGroup>
        <Button label="Mini" size="large"/>
      </DemoLine>
      <DemoLine>
        <SegmentGroup v-model={state.val} size="middle">
          <Segment label="Mini" val="mini"/>
          <Segment label="Small" val="small"/>
          <Segment label="Normal" val="normal"/>
          <Segment label="Large" val="large"/>
        </SegmentGroup>
        <Button label="Small" size="middle"/>
      </DemoLine>
      <DemoLine>
        <SegmentGroup v-model={state.val} size="small">
          <Segment label="Mini" val="mini"/>
          <Segment label="Small" val="small"/>
          <Segment label="Normal" val="normal"/>
          <Segment label="Large" val="large"/>
        </SegmentGroup>
        <Button label="Normal" size="small"/>
      </DemoLine>
    </DemoRow>
  );
});
